<template>
    <div>
      <div class="block">
        <span class="demonstration fw" style="font-size:26px;">效果预览</span>
        <el-carousel :interval="5000" arrow="always" trigger="click" height="330px" style="width:670px;margin:30px auto;;">
          <el-carousel-item v-for="item in fileList" :key="item.url">
            <el-image :src="item.url" style="width:100%;height:100%;"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-row class="fw" style="font-size:26px;">图片列表</el-row>
      <el-row>
        <el-upload
          action="http://118.89.154.192:8086/appTokenServer"
          list-type="picture-card"
          :before-upload="uploadSectionFile" 
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :show-file-list="true" >
            <i class="el-icon-plus" ></i>
            <!-- <i class="el-icon-loading" ></i> -->
        </el-upload>
      </el-row>
      <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <el-button type="primary" @click="sureUpload" :disabled="uploadLoading" :loading="uploadLoading">确定上传</el-button>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <el-dialog :visible.sync="dialogVisible" width="30%" top="5vh">
        <div class="fw" style="font-size:26px;line-height:80px;">{{dialog.name}}</div>
        <img width="100%" :src="dialog.imageUrl" alt="">
      </el-dialog> 
    </div>
</template>
<script>
let OSS = require('ali-oss');
let client = new OSS({
  region: 'oss-cn-shanghai',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
  accessKeyId: 'LTAIoM90JOn4aEwU',
  accessKeySecret: 'OATKi5mcguNP3O4psil8uEuBT3a7kk',
  bucket: 'maitianyun',
  
});
export default {
    data(){
        return{
            fileList:[],
            dialogVisible: false,
            uploadLoading:false,
            dialog:{
              name:"",
              imageUrl:""
            }
        }
    },
    mounted(){
        this.requestImgList();
    },
    methods:{
      requestImgList(){
        this.fileList=[];
        this.postRequest("/api/background/banner_info/banner_info").then(resp=>{
          if(resp && resp.status==200){
            for(var i=0;i<resp.data.obj.bannerList.length;i++){
              this.fileList.push({name:resp.data.obj.bannerList[i].title,url:resp.data.obj.bannerList[i].picUrl})
            }
          }
        })
      },
      handleRemove(file, fileList) {
        this.fileList=fileList;
      },
      handlePictureCardPreview(file) {
        this.dialog.imageUrl = file.url;
        this.dialog.name = file.name;
        this.dialogVisible = true;
      },
      timestamp(){
            var time = new Date();
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return ""+y+this.add0(m)+this.add0(d)+this.add0(h)+this.add0(mm)+this.add0(s);
      },
      add0(m){
            return m<10?'0'+m : m;
      },
      //上传图片
      uploadSectionFile(e){
        var file=e;
        console.log(file)
        if((file.type).indexOf("image")==-1){
            this.common.showToast("warning","只能上传图片")
            return false;
        }else{
            var value = file.name;
            var suffix = value.substr(value.indexOf("."));
            var storeAs = "image/"+this.timestamp()+suffix;
            console.log(file.name + ' => ' + storeAs);
            var that=this;
            client.put(storeAs, file).then(r1 =>{
                console.log(r1);
                if(r1.res && r1.res.statusCode==200){
                    this.fileList.push({name:file.name,url:r1.url})
                    return client.get(storeAs);
                }else{
                    this.common.showToast("warning","上传失败")   
                }  
            }).then(function (r2) {
                console.log(r2);
            }).catch(function (err) {
                console.error(err);
                that.common.showToast("warning","上传失败")
            });
        }
      },
      sureUpload(){
        this.uploadLoading=true;
        this.postRequest("/api/background/banner_info/edit_banner_info",{
          bannerList:JSON.stringify(this.fileList).replace(/name/g,"title").replace(/url/g,"picUrl")
        }).then(resp =>{
          this.uploadLoading=false;
          if(resp && resp.status==200){
            this.common.showToast('success','上传成功')
            this.requestImgList();
          }
        })
      }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  min-height: 50px;
  line-height: 50px;
}
.el-col {
  min-height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.cardBox{
  width: 880px;
  margin:0 auto;
}
.el-card{
  width:250px;
  margin: 20px;
  float: left;
}
.slh{
  margin:10px;
}
.el-carousel--horizontal{
  overflow: hidden;
}
</style>
